<!--
 * @Author: your name
 * @Date: 2021-10-19 16:10:04
 * @LastEditTime: 2021-12-27 19:51:35
 * @LastEditors: wei_jt@ecidi.com
 * @Description: In User Settings Edit
 * @FilePath: \central-system\src\modules\SystemDemonstration\SingleSignOn\index.vue
-->
<template>
  <div class="box">
    <p class="firstTitle">
      基础概念:
    </p>
    <p>
      跨域间的前后端分离项目也是基于共享统一授权的cookie来实现单点登录的，因此需要一个SSO服务来统一控制认证与授权。
    </p>
    <p>
      <fks-button
        type="primary"
        @click="testUnifiedAuthentication"
      >
        统一认证登录
      </fks-button><span
        style="margin-left: 16px; color: red"
      >（用户需从统一认证登录后进行系统跳转）</span>
    </p>
    <p class="firstTitle">
      外部系统：（本示例用凤翎测试环境作为第三方系统）
    </p>
    <p>1、用户通过统一认证登录进入主系统。</p>
    <p>2、点击跳转外部系统时调用sso服务的认证接口。</p>
    <p>
      3、认证成功跳转至第三方系统设置的回调地址（凤翎系统下设置system服务的第三方客户端认证重定向接口），回调地址携带code参数。
    </p>
    <p>4、通过code调用sso服务的access_token接口获取token。</p>
    <p>5、通过token获取主系统用户信息。</p>
    <p>6、通过第三方系统用户和主系统用户绑定信息生成token。</p>
    <p>
      7、通过token里面的用户类型判断第三方系统和主系统用户是否绑定，绑定则跳转至首页，未绑定则进入绑定页绑定
    </p>
    <p>
      <fks-button @click="skipToExternalDemo">
        跳转外部系统
      </fks-button>
    </p>
    <p class="firstTitle">
      saas系统：（在系统内同一用户在不同应用跳转）
    </p>
    <p>1、用户通过统一认证登录进入主系统。</p>
    <p>2、点击跳转内部系统时调用sso服务的认证接口。</p>
    <p>3、认证成功跳转至saas系统设置的回调地址，回调地址携带code参数。</p>
    <p>4、通过code调用sso服务的access_token接口获取token。</p>
    <p>5、跳转首页。</p>
    <p>
      <fks-button @click="skipToInternalDemo">
        跳转内部系统
      </fks-button>
    </p>
  </div>
</template>
<script>
export default {
  name: 'SSO',
  methods: {
    testUnifiedAuthentication() {
      this.$router.push('/testUnified')
    },
    skipToExternalDemo() {
      window.open(
        `${this.VUE_APP_BASE_API}` +
          '/sys-sso/oauth2/authorize?' +
          'client_id=7c81e2e38fc39feae55ae6193b60fa19' +
          '&redirect_uri=' +
          'https://apigateway.hdec.com/fawkes-new/local/api/sys-system/oauth/client/redirect/7c81e2e38fc39feae55ae6193b60fa19/FAWKES' +
          '&response_type=code'
      )
    },
    skipToInternalDemo() {
      window.open(
        `${this.VUE_APP_BASE_API}` +
          '/sys-sso/oauth2/authorize?' +
          'client_id=a3521fe4552bad5218e5e74e64bf0d0a' +
          '&redirect_uri=' +
          'https://apigateway.hdec.com/fawkes-new/local/api/sso-demo/saas/code' +
          '&response_type=code'
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 2% 2% 0;
  overflow: auto;
  background-color: white !important;

  .firstTitle {
    width: 100%;
    font-weight: bold;
    font-size: 16px;
  }
}
</style>